<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				width: 600px;
				
				height: 600px;
				
				border: 1px solid #000;
				margin: 100px auto;
				/* overflow: hidden; */
				
				/* 
				在伸缩布局中 默认情况下水平方向是主轴，默认情况下主轴的起点在伸缩容器的
				 最左边,默认情况下所有的伸缩项都是从主轴的起点开始排版的
				 但是我们也可以通过属性来修改主轴的起点位置
				 	flex-direction: row;
					用于修改主轴起点的位置
					row:起点在伸缩容器的最左边 终点在伸缩容器的最右边 从左到右
					
				 */
				display: flex;
				/* flex-direction: row-reverse; */
				/* flex-direction: column; */
		     	/* flex-direction: column-reverse; */
				
				/* 
				 justify-content: flex-start;
				 主轴上伸缩项对齐的默认值
				 flex-end  主轴终点对齐
				 space-between  两端对齐
				 space-around  环绕对齐 每个元素两侧都有间隔
				 */
				
				flex-direction: row;
				justify-content: flex-start;
				/* 告诉浏览器排版 好的伸缩项需要和侧轴的起点对齐
				flex-start
				flex-end 侧轴的终点对齐
				center  侧轴的中点对齐
				
				
				注意:侧轴对比主轴来说 没有两端对齐和环绕对齐
				
				align-items: flex-end
				align-items: flex-start;
				align-items: center;
				 align-items: baseline;   让所有的伸缩项基线对齐
				 align-items: stretch; (拉伸等高对齐)
				 让所有伸缩向的高度变为侧轴的高度。
				 注意点:如果需要设置为拉伸对齐 那么伸缩项不能设置高度
				 如果伸缩项设置了高度 那么拉伸对齐就会失效
				*/
				align-items: stretch;
				
			
			}
			ul>li{
				width: 100px;
				/* height: 100px; */
				line-height: 100px;
				text-align: center;
				font-size: 30px;
		 
				
			}
			ul>li:nth-child(1){
				background-color: red;
			}
			
			ul>li:nth-child(2){
				background-color: green;
				padding-top: 100px;
			}
			
			ul>li:nth-child(3){
				background-color: blue;
			}
			
			
		</style>
	</head>
	<body>
		
		<ul>
			<li>yz</li>
			<li>xt</li>
			<li>op</li>
		</ul>
		
		
	</body>
</html>